<template>
  <div class="login">
    <div class="header">
      <img src="../../assets/images/logo.png" alt="">
    </div>
    <div class="login-con">
      <img class="login-title" src="../../assets/images/login-title.png" />
      <Card>
        <div class="form-con">
          <Form ref="loginForm" :model="form" :rules="rules" @keydown.enter.native="submit">
            <Tabs value="name1">
              <TabPane label="登录" name="name1">
                <Card :bordered="false">
                  <br>
                  <FormItem prop="phone" class="martop">
                    <Input v-model="form.phone" placeholder="手机号码"></Input>
                  </FormItem>
                  <br>
                  <FormItem prop="password">
                    <Input type="password" v-model="form.password" placeholder="请输入密码"></Input>
                  </FormItem>
                  <br>
                  <FormItem>
                    <Button @click="submit" type="primary" style="width: 96px;height: 40px;">立即登录</Button>
                    <a herf="#" class="forGetPassword">忘记密码</a>
                  </FormItem>
                </Card>

              </TabPane>

              <TabPane label="注册" name="name2">
                <Card :bordered="false">
                  <Form ref="formValidate" :model="formValidate" :rules="ruleValidate">
                    <FormItem prop="username">
                      <Input v-model="formValidate.username" placeholder="手机号码"></Input>
                    </FormItem>
                    <br>
                    <FormItem prop="password">
                      <Input v-model="formValidate.password" placeholder="短信验证码">
                         <span slot="append">获取验证码</span>
                      </Input>
                    </FormItem>
                    <br>
                    <FormItem prop="aginPassword">
                      <Input v-model="formValidate.aginPassword" placeholder="设置密码" @on-click="close" icon="ios-clock-outline"></Input>
                    </FormItem>
                    <br>
                    <FormItem>
                      <Button type="primary" @click="handleSubmit('formValidate')">立即注册</Button>
                    </FormItem>
                  </Form>
                </Card>

              </TabPane>
            </Tabs>
          </Form>
        </div>
      </Card>
    </div>
    <div class="footer">
      Copyright © 2018 www.anhuanjia.com All Rights Resreved | 京ICP备13038154号-6 安环家荣誉出品
    </div>
  </div>

</template>

<script>
  export default {
    data() {
      return {
        form: {
          phone: '123',
          password: '88888888'
        },
        formValidate: {
          username: '',
          password: '',
          aginPassword: "",
          identity: '',
        },
        ruleValidate: {
          username: [{
            required: true,
            message: 'The name cannot be empty',
            trigger: 'blur'
          }],
          password: [{
            required: true,
            message: 'Mailbox cannot be empty',
            trigger: 'blur'
          }],
          aginPassword: [{
            required: true,
            message: 'Mailbox cannot be empty',
            trigger: 'blur'
          }],
          identity: [{
            required: true,
            message: 'Please select the city',
            trigger: 'change'
          }],
        }
      }
    },
    computed: {
      rules() {
        return {
          phone: {
            required: true,
            message: '账号不能为空',
            trigger: 'blur'
          },
          password: {
            required: true,
            message: '密码不能为空',
            trigger: 'blur'
          },
        }
      }
    },
    methods: {
      // ...mapActions([
      //   'signIn',
      // ]),
      close(){
        console.log('asdfasdf')
      },
      submit() {
        this.$refs.loginForm.validate((valid) => {
          console.log(valid);
          if (valid) {

            let info = this.form
            axios.post('/member/ajaxlogin', {
              UserName: info.phone,
              Password: info.password,
            }).then((res) => {
              if (!res.status) {
                this.$Message.error('用户名或密码错误');

              } else {

                this.$Message.info('登陆成功');

                axios.get("/operationLog/loginOper").then((res)=>{
                  if(res._STATUS == 1) {
                    this.$router.push({
                      name: 'index'
                    })
                  }
                })
              }
            })
          }
        })
      },
      handleSubmit(name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            this.$Message.success('Success!');
          } else {
            this.$Message.error('Fail!');
          }
        })
      },
      handleReset(name) {
        this.$refs[name].resetFields();
      }

    }
  }
</script>

<style lang="less">
  .login {
    width: 100%;
    height: 100vh;
    background-image: url('../../assets/images/login-bg.png');
    background-size: center;
    background-position: center;
    position: relative;
    display: flex;

    .ivu-input {
      height: 46px !important;
    }
    .ivu-input-icon{
      line-height: 45px;
    }
    .header {
      position: absolute;
      width: 100%;
      padding: 15px 0;
      background: white;

      img {
        margin-left: 33px;
      }
    }

    .footer {
      position: absolute;
      width: 100%;
      background: white;
      bottom: 0;
      text-align: center;
      padding: 20px 0;
    }
  }

  .login-con {
    width: 550px;
    margin: auto;
  }

  .login .one {
    font-size: 18px;
    font-family: MicrosoftYaHei;
    color: #515A6E;
    cursor: pointer;
    margin-bottom: 20px;
    display: inline-block;
    height: 40px;
  }

  .one:hover {
    border-bottom: 2px solid #2b85e4;
  }

  .one:visited {
    color: #17233D;
  }

  .hide {
    display: none;
  }

  .tab {
    height: 40px;
    border-bottom: 2px solid #dcdee2;
  }

  .martop {
    margin-top: 10px 0;
  }

  .login-title {
    width: 98%;
    padding-bottom: 35px;
    padding-left: 30px;
  }

  .forGetPassword {
    color: #ED4014;
    float: right;
    margin-right: 10px;
  }
</style>
